<template>
  <div class="h-full flex flex-col">
    <a v-for="(item, index) in DIdetailId.split(',').filter(item => item)" :key="index"  @click="showModal('detail',item)">
      {{ item.trim() }}
      <br>
    </a>

  
    <!-- 大抽屉 -->
    <a-drawer
      :title="$t('user.verification-code.required11156677888888')"
      placement="right"
      :visible="modalVisible"
      :width="1000"
      :rowKey="(record) => record.Id"
      @close="closeDrawer"
    >
      <a-form :form="form" ref="form" class="drawer-form" label-align="left">
        <!-- APP名称 -->
        <a-row :gutter="24">
          <a-col :span="8">
            <a-form-item
              :label="
                $t('user.verification-code.required1115661105772124555')
              "
            >
              <a-select
                :placeholder="
                  $t(
                    'user.verification-code.required1115661105772113464357654435'
                  )
                "
                @change="handleChangeAppid"
                show-search
                option-filter-prop="children"
                v-decorator="[
                  'DataLibraryAppidId',
                  {
                    rules: [
                      {
                        required: true,
                        message: $t(
                          'user.verification-code.required111566110577280'
                        ),
                      },
                    ],
                  },
                ]"
                :disabled="see"
              >
                <a-select-option
                  v-for="item in appidLists"
                  :value="item.value"
                  :key="item.value"
                >
                  {{ item.label }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <!-- APP负责人 -->
            <a-form-item
              :label="$t('user.login.mobile.verification-code.placeholder')"
            >
              <a-input
                v-decorator="['AppOwner']"
                :placeholder="
                  $t('user.login.mobile.verification-code.placeholder11')
                "
                disabled
              />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item :label="$t('user.login.password.placeholder')">
              <a-input
                v-decorator="['AppDepartment']"
                :placeholder="$t('user.login.message-invalid-credentials')"
                disabled
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="8">
            <a-form-item label="enterprise APP ID">
              <a-input
                v-decorator="['BmwAppId']"
                placeholder="enterprise APP ID"
                disabled
              />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="Department APP ID">
              <a-input
                v-decorator="['BbaAppId']"
                placeholder="Department APP ID"
                disabled
              />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item label="Feature ID">
              <a-input
                v-decorator="['FeatherId']"
                placeholder="Feature ID"
                disabled
              />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row
          :gutter="24"
          v-show="
            modalTitle != $t('user.verification-code.required1115667766')
          "
        >
          <a-col :span="8">
            <a-form-item
              :label="
                $t('user.verification-code.required1115661105771411111')
              "
            >
              <a-input v-decorator="['DataLibraryUser']" disabled />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item
              :label="$t('user.verification-code.required111566110577142')"
            >
              <a-input v-decorator="['DataLibraryCreateTime']" disabled />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <a-form-item
              :label="$t('user.verification-code.required111566110577143')"
            >
              <a-input v-decorator="['DataLibraryUpdateTime']" disabled />
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="24">
          <a-col :span="8">
            <!-- 数据控制者 -->
            <a-form-item :label="$t('user.login.remember-me')">
              <a-select
                mode="multiple"
                @change="changeselect"
                :value="selectedItems"
                option-filter-prop="children"
                v-decorator="[
                  'DataLibraryController',
                  {
                    rules: [
                      {
                        required: true,
                        message: $t('user.login.forgot-password'),
                      },
                    ],
                  },
                ]"
                :placeholder="$t('user.login.forgot-password')"
                :disabled="see"
              >
                <a-select-option
                  v-for="item in systemControllerSourceData"
                  :value="item.value"
                  :key="item.value"
                  >{{ item.label }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="8" v-if="otherflag">
            <a-form-item label="Other">
              <a-input
                v-decorator="[
                  'DataLibraryControllerOther',
                  {
                    rules: [
                      {
                        required: true,
                        message: $t(
                          'user.verification-code.required111566110577336'
                        ),
                      },
                    ],
                  },
                ]"
                :disabled="see"
              />
            </a-form-item>
          </a-col>
          <a-col :span="8">
            <!-- 线上/线下 -->
            <a-form-item :label="$t('user.login.tab-login-credentials')">
              <a-select
                v-decorator="[
                  'DataLibraryEnvironment',
                  {
                    rules: [
                      {
                        required: true,
                        message: $t(
                          'user.verification-code.required1115661105773368800'
                        ),
                      },
                    ],
                  },
                ]"
                show-search
                option-filter-prop="children"
                :filter-option="filterOption"
                :placeholder="$t('user.login.tab-login-mobile')"
                :disabled="see"
              >
                <a-select-option
                  v-for="item in Xians"
                  :value="item.value"
                  :key="item.value"
                >
                  {{ lang === "zh-CN" ? item.label : item.labelEn }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-form-item label="ID" v-show="false" class="hidden">
          <a-input v-decorator="['Id']" disabled />
        </a-form-item>
        <!-- 数据详情 -->
        <a-form-item style="margin-right: 0">
          <div style="position: relative">
            <div
              style="
                color: red;
                margin-top: -10px;
                display: inline-block;
                top: 9px;
                z-index: 99;
              "
            >
              *
            </div>
            {{ $t("user.register.email.placeholder") }}
          </div>
          <template>
            <a-table
              size="middle"
              :data-source="dataDetailInfoTables"
              :pagination="{ pageSize: 10 }"
              :rowKey="(record) => record.key"
            >
              <!-- 数据字段 -->
              <a-table-column
                key="DataItem"
                :data-index="
                  lang === 'zh-CN' ? 'DataItemsStr' : 'DataItemsStrEn'
                "
                width="150"
              >
                <span slot="title">{{
                  $t("app.setting.themecolor.dust")
                }}</span>
                <!-- 表格右下角操作 -->
                <template slot-scope="text, record">
                  <!-- 数据项 -->
                  <div v-if="'RpaType' in record">
                    <a-select
                      :placeholder="$t('app.setting.themecolor.dust')"
                      v-model="record.DataItemStr"
                      :show-arrow="false"
                      show-search
                      @change="handleDiChange"
                      @search="handleSearch"
                      option-filter-prop="children"
                      :filter-option="false"
                      style="max-width: 280px; min-width: 140px"
                      v-if="$t('app.setting.themecolor.dust') == '数据字段'"
                    >
                      <a-select-option
                        v-for="item in dataItemsSearchData"
                        :value="item.value"
                        :key="item.value"
                      >
                        <a-tooltip placement="topLeft">
                          <template slot="title">
                            {{ item.label }}
                          </template>
                          {{ item.label }}
                        </a-tooltip>
                      </a-select-option>
                    </a-select>
                    <a-select
                      :placeholder="$t('app.setting.themecolor.dust')"
                      v-model="record.DataItemStr"
                      :show-arrow="false"
                      show-search
                      @change="handleDiChange"
                      @search="filterSearchInputOptionEn"
                      option-filter-prop="children"
                      :filter-option="false"
                      style="max-width: 280px; min-width: 140px"
                      v-else
                    >
                      <a-select-option
                        v-for="item in dataItemsSearchData"
                        :value="item.value"
                        :key="item.value"
                      >
                        <a-tooltip placement="topLeft">
                          <template slot="title">
                            {{ item.labelEn }}
                          </template>
                          {{ item.labelEn }}
                        </a-tooltip>
                      </a-select-option>
                    </a-select>
                  </div>
                  <a v-else>
                    {{
                      record[
                        lang === "zh-CN" ? "DataItemStr" : "DataItemStrEn"
                      ]
                    }}
                  </a>
                  <!-- 删除按钮 -->
                  <a-popconfirm
                    :title="
                      $t('user.verification-code.required111566110577225')
                    "
                    :ok-text="$t('user.verification-code.required1166')"
                    :cancel-text="$t('user.email.required11')"
                    @confirm="deletes(record)"
                    v-if="!see"
                  >
                    <a-button type="link"
                      >{{ $t("menu.exception.trigger") }}
                    </a-button>
                  </a-popconfirm>
                </template>
              </a-table-column>
              <!-- 数据级别 -->
              <a-table-column
                key="DataLevelStr"
                data-index="DataLevelStr"
                width="150"
              >
                <span slot="title">{{
                  $t("app.setting.themecolor.sunset")
                }}</span>
              </a-table-column>
              <!-- 数据敏感度 -->
              <a-table-column
                key="DataSensitiveStr"
                data-index="DataSensitiveStr"
                width="150"
              >
                <span slot="title">{{
                  $t("app.setting.themecolor.green")
                }}</span>
              </a-table-column>
              <!-- 所在城市 -->
              <a-table-column
                key="DataCity"
                data-index="DataCity"
                width="150"
                :allowClear="false"
                :noFoundContent="noFoundContentText"
              >
                <span slot="title">{{
                  $t("user.register.get-verification-codeeeee")
                }}</span>
                <template slot-scope="text, record">
                  <a-select
                    mode="multiple"
                    v-model="record.DataCity"
                    option-filter-prop="children"
                    :placeholder="
                      $t('user.verification-code.required111566110577338')
                    "
                    style="width: 128px"
                    :disabled="see"
                  >
                    <a-select-option
                      v-for="item in sonfigurationItemsContent"
                      :value="item.value"
                      :key="item.value"
                    >
                      {{ item.label }}
                    </a-select-option>
                  </a-select>
                </template>
              </a-table-column>
              <!-- 数据存储地点 -->
              <a-table-column
                key="DataDeposit"
                data-index="DataDeposit"
                width="150"
              >
                <span slot="title">{{
                  $t("user.register.sign-innnnn")
                }}</span>
                <template slot-scope="text, record">
                  <a-select
                    mode="multiple"
                    v-model="record.DataDeposit"
                    option-filter-prop="children"
                    :placeholder="
                      $t('user.verification-code.required111566110577339')
                    "
                    style="width: 128px"
                    :disabled="see"
                  >
                    <a-select-option
                      v-for="item in fonfigurationItemsContent"
                      :value="item.value"
                      :key="item.value"
                    >
                      {{ item.label }}
                    </a-select-option>
                  </a-select>
                </template>
              </a-table-column>

              <!-- 来源 -->
              <a-table-column
                key="DataSource"
                :title="$t('user.register-result.msg')"
              >
                <template slot-scope="text, record">
                  <span>
                    <div class="conter">
                      <a-select
                        v-model="record.DataSource"
                        :placeholder="$t('user.register-result.msg')"
                        option-filter-prop="children"
                        style="max-width: 158px; min-width: 140px"
                        :disabled="see"
                        mode="multiple"
                        @search="fetchUser"
                      >
                        <template slot="notFoundContent">
                          <center>
                            <a-button
                              type="dashed"
                              @click="onChange1(record, 'DataSource')"
                              v-if="!appidLists.length"
                              >{{ $t("rpa.form.AddApplication") }}
                            </a-button>
                          </center>
                        </template>
                        <a-select-option
                          v-for="item in appidLists"
                          :value="item.value"
                          :key="item.value"
                        >
                          {{ item.label }}
                        </a-select-option>
                      </a-select>
                    </div>
                  </span>
                </template>
              </a-table-column>
              <!-- 目的地 -->
              <a-table-column
                key="DataDestination"
                :title="$t('user.register-result.activation-email')"
              >
                <template slot-scope="text, record">
                  <span>
                    <div class="conter">
                      <a-select
                        mode="multiple"
                        v-model="record.DataDestination"
                        :disabled="see"
                        @search="fetchUser"
                        option-filter-prop="children"
                        :placeholder="
                          $t('user.register-result.activation-email')
                        "
                        style="max-width: 158px; min-width: 140px"
                      >
                        <template slot="notFoundContent">
                          <center>
                            <a-button
                              type="dashed"
                              @click="onChange1(record, 'DataDestination')"
                              v-if="!appidLists.length"
                              >{{ $t("rpa.form.AddApplication") }}
                            </a-button>
                          </center>
                        </template>
                        <a-select-option
                          v-for="item in appidLists"
                          :value="item.value"
                          :key="item.value"
                        >
                          {{ item.label }}
                        </a-select-option>
                      </a-select>
                    </div>
                  </span>
                </template>
              </a-table-column>

              <!-- 身份信息下的删除 -->
              <span slot="cityAction" slot-scope="text, record">
                <a-select
                  mode="multiple"
                  v-model="record.DataCity"
                  :placeholder="$t('user.register.get-verification-code')"
                  style="width: 128px"
                  v-decorator="[
                    {
                      rules: [
                        {
                          required: true,
                          message: 'Please input your note!',
                        },
                      ],
                    },
                  ]"
                >
                  <a-select-option
                    v-for="items in sonfigurationItemsContent"
                    :value="items.value"
                    :key="items.value"
                    >{{ items.label }}</a-select-option
                  >
                </a-select>
              </span>
              <span slot="depositAction" slot-scope="text, record">
                <a-select
                  v-model="record.DataDeposit"
                  :placeholder="$t('user.register.sign-in')"
                  style="width: 128px"
                >
                  <a-select-option
                    v-for="item in fonfigurationItemsContent"
                    :value="item.value"
                    :key="item.value"
                  >
                    {{ item.label }}
                  </a-select-option>
                </a-select>
              </span>
              <span slot="sourceAction" slot-scope="text, record">
                <a-select
                  v-model="record.DataSource"
                  :placeholder="$t('user.register-result.msg')"
                  style="width: 128px"
                >
                  <a-select-option
                    v-for="item in appidLists"
                    :value="item.value"
                    :key="item.value"
                  >
                    {{ item.label }}
                  </a-select-option>
                </a-select>
              </span>
              <span slot="destinationAction" slot-scope="text, record">
                <a-select
                  v-model="record.DataDestination"
                  :placeholder="$t('user.register-result.activation-email')"
                  style="width: 128px"
                >
                  <a-select-option
                    v-for="item in appidLists"
                    :value="item.value"
                    :key="item.value"
                  >
                    {{ item.label }}
                  </a-select-option>
                </a-select>
              </span>
            </a-table>
            <!-- 发现导入 -->
            <a-button
              type="link"
              icon="vertical-align-bottom"
              @click="openModal"
              v-if="!see"
              >{{ $t("user.register-result.msg6868") }}
            </a-button>
            <!-- 新增字段 -->
            <a-button type="link" @click="changelist" v-if="!see"
              >{{ $t("app.setting.themecolor.gggg") }}
            </a-button>
          </template>
        </a-form-item>
      </a-form>
      <div
          :style="{
            position: 'absolute',
            right: 0,
            bottom: 0,
            width: '100%',
            borderTop: '1px solid #e9e9e9',
            padding: '10px 16px',
            background: '#fff',
            textAlign: 'center',
            zIndex: 1,
          }"
        >
          <!-- 提交 -->
          <a-button
            type="primary"
            @click="submitCreate()"
            style="margin-right: 20px"
            v-if="!see"
            >{{ $t("user.register-result.back-home") }}
          </a-button>
          <!-- 保存草稿 -->
          <a-button @click="submitSave()" style="margin-right: 20px" v-if="!see"
            >{{ $t("user.register-result.view-mailbox") }}
          </a-button>
          <a-button type="primary" style="margin-right: 8px" @click="closeDrawer"
            >{{ $t("user.email.required11") }}
          </a-button>
        </div>
    </a-drawer>
    <!-- 导入步骤条 -->
    <a-modal
      :visible="visible"
      @ok="handleOk"
      @cancel="handleCancel"
      width="600px"
    >
      <div style="margin-top: 20px">
        <a-steps :current="current">
          <a-step
            v-for="item in steps"
            :key="item.title"
            :title="$t(item.title)"
          />
        </a-steps>
        <div class="steps-content" style="margin-top: 20px">
          <a-form
            layout="inline"
            v-show="steps[current].content == 'firstStep'"
            style="padding-bottom: 100px"
            :form="diForm"
          >
            <!-- 第一步 -->
            <a-form-item
              class="appids"
              :label="
                $t('user.verification-code.required1115661105772124555')
              "
            >
              <a-row>
                <a-col :span="24">
                  <a-select
                    :placeholder="$t('user.login.mobile.placeholder5656')"
                    @change="handleChangeDiAppid"
                    v-decorator="[
                      'DiscoverAppId',
                      {
                        rules: [
                          {
                            required: true,
                            message: $t('user.login.mobile.placeholder5656'),
                          },
                        ],
                      },
                    ]"
                    style="width: 270px"
                  >
                    <a-select-option
                      v-for="item in appidLists"
                      :value="item.label"
                      :key="item.value"
                    >
                      {{ item.label }}
                    </a-select-option>
                  </a-select>
                </a-col>
              </a-row>
            </a-form-item>
            <a-form-item
              class="appids"
              :label="$t('user.verification-code.required11156633')"
            >
              <a-row>
                <a-col :span="24" v-if="treeData.length > 0">
                  <!-- 选中后查询 -->
                  <a-tree
                    defaultExpandAll
                    v-model:checkedKeys="checkedKeys"
                    checkable
                    :tree-data="treeData"
                  >
                    <template #title="{ title, key }">
                      <span v-if="key === '0-0-1-0'" style="color: #1890ff">{{
                        title
                      }}</span>
                      <template v-else>{{ title }}</template>
                    </template>
                  </a-tree>
                </a-col>
                <a-col :span="24" v-else
                  >{{ $t("user.verification-code.required11156677") }}
                </a-col>
              </a-row>
            </a-form-item>
          </a-form>
          <!-- 第二步 -->
          <a-row v-show="steps[current].content == 'secondStip'">
            <a-col :span="24">
              <!-- 选中的分类表 -->
              <a-table
                ref="table"
                size="middle"
                class="h-full"
                style="right: 0"
                :dataSource="dccDiData"
                :pagination="true"
                :loading="listLoading"
                :rowKey="(record) => record.Id"
              >
                <a-table-column key="Items" data-index="Items" width="150">
                  <span slot="title">{{
                    $t("app.setting.themecolor.dust")
                  }}</span>
                </a-table-column>
                <a-table-column
                  key="Classification"
                  data-index="Classification"
                  width="150"
                >
                  <span slot="title">{{
                    $t("user.verification-code.required11156644")
                  }}</span>
                  <template slot-scope="text, record">
                    <a-select
                      v-model="record.Classification"
                      :placeholder="
                        $t('user.verification-code.required11156666')
                      "
                      style="width: 198px"
                    >
                      <a-select-option
                        v-for="(item, index) in dccSelectData"
                        :value="item.value"
                        :key="item.value"
                      >
                        {{ lang === "zh-CN" ? item.label : item.labelEn }}
                      </a-select-option>
                    </a-select>
                  </template>
                </a-table-column>
                <a-table-column key="Result" data-index="Result" width="150">
                  <span slot="title">{{
                    $t("user.verification-code.required11156655")
                  }}</span>
                  <template slot-scope="text, record">
                    <div v-if="record.Result == '未匹配'" style="color: red">
                      {{ lang === "zh-CN" ? record.Result : record.ResultEn }}
                    </div>
                    <div v-else>
                      {{ lang === "zh-CN" ? record.Result : record.ResultEn }}
                    </div>
                  </template>
                </a-table-column>
              </a-table>
              <a-button type="primary" @click="mate()"
                >{{ $t("user.phone-number.required") }}
              </a-button>
            </a-col>
          </a-row>
        </div>
        <div class="steps-action"></div>
      </div>

      <template slot="footer">
        <!-- <a-button key="submit" type="primary" :loading="loading" @click="handleOk">
        Submit
      </a-button> -->
        <a-button v-if="current > 0" style="margin-left: 8px" @click="prev">
          {{ $t("user.verification-code.required11156611") }}
        </a-button>
        <a-button
          v-if="current < steps.length - 1"
          type="primary"
          @click="next"
        >
          {{ $t("user.verification-code.required11156622") }}
        </a-button>
        <a-button
          v-if="current == steps.length - 1"
          type="primary"
          @click="handleOk"
        >
          {{ $t("user.verification-code.required1166") }}
        </a-button>
        <!-- 取消 -->
        <a-button key="back" @click="handleCancel">
          {{ $t("user.email.required11") }}
        </a-button>
      </template>
    </a-modal>
    <!-- 查看匹配数据 -->
    <a-modal
      :title="detailTitle"
      :visible="eyeDrawer"
      width="750px"
      @cancel="closeEyeDrawer"
    >
      <a-table
        style="width: 700px"
        :data-source="eyeDrawerList"
        bordered
        :rowKey="(record) => record.Id"
      >
        <a-table-column key="DataItem" data-index="DataItem" width="150">
          <span slot="title">{{ $t("app.setting.themecolor.dust") }}</span>
          <template slot-scope="text, record">
            <span v-if="lang === 'zh-CN'">
              {{ record.DataItem }}
            </span>
            <span v-else>
              {{ record.DataItemEn }}
            </span>
          </template>
        </a-table-column>
        <a-table-column
          key="DataSensitive"
          data-index="DataSensitive"
          width="150"
        >
          <span slot="title">{{ $t("app.setting.themecolor.green") }}</span>
        </a-table-column>
        <a-table-column key="DataLevel" data-index="DataLevel" width="150">
          <span slot="title">{{ $t("app.setting.themecolor.sunset") }}</span>
        </a-table-column>
        <a-table-column
          key="ProtectionStr"
          data-index="ProtectionStr"
          width="150"
        >
          <span slot="title">{{ $t("user.register-result.msg3344") }}</span>
        </a-table-column>
      </a-table>
      <!-- 按钮配置 -->
      <template slot="footer">
        <a-button type="primary" @click="closeEyeDrawer">
          {{ $t("app.setting.themecolor.ff99999999") }}
        </a-button>
      </template>
    </a-modal>
    
  </div>
</template>

<script>
import { VolumeData } from "@/utils/util";
import { dataLibraryLists } from "@/api/ytdg";
import {
  appIdCreatexl,
  appIdDetail,
  appidSxq,
  dIdDetailGroup,
} from "@/api/appid";
import { dataLibraryChange, dataLibraryCreate } from "@/api/di/json";
import { configurationSelect } from "@/api/configs";
import {
  dataDelete,
  dataLibraryDelete,
  dataLibraryDetail,
  dccSelect,
  discoverFinds,
  discoverTree,
} from "@/api/di/form";
import { childataItems, dccDataItemsSelect } from "@/api/dcc";
import { userQuery } from "@/api/common/form";
import axios from "axios";
import moment from "moment";
import tableSelect from "@/components/tableSelect/tableSelect.vue";
import storage from "store";
import { ACCESS_TOKEN } from "@/store/mutation-types";
import { getUserInfo } from "@/api/index";
import Addapp from "@/components/componentLibrary/addapp.vue";
import row from "ant-design-vue/lib/row";

export default {
  props: {
    DIdetailId: {
      type: String,
    },
   /** 接收父组件传过来的数据 */
   initData: {
      type: Object,
      required: true,
    }
  },
  computed: {
    row() {
      return row;
    },
  },
  components: {
    // AppIdSelect: () => import("@/componentwoyegangkandaos/ytdg/appidSelect.vue"),
    tableSelect,
    Addapp,
  },
  data() {
    return {
      userroleid: "",
      // 表单数据
      form: this.$form.createForm(this),
      diForm: this.$form.createForm(this),
      // 数据详情的标题内容
      detailTitle: "",
      list: [],
      selectedItems: [],
      // 用户列表
      userList: [],
      listLoading: false,
      selectedRowKeys: [],
      Xians: [
        {
          label: "线上",
          labelEn: "Online",
          value: 1,
        },
        {
          label: "线下",
          labelEn: "Offline",
          value: 2,
        },
      ],
      noFoundContentText: "请选择城市",
      modalVisible: false,
      modalTitle: "",
      visible: false,
      current: 0,
      steps: [
        {
          title: "menu.account.logout112299227788",
          content: "firstStep",
        },
        {
          title: "menu.account.logout112299227799",
          content: "secondStip",
        },
      ],
      eyeDrawer: false,
      value: ["0-0-0"],
      total: 0,
      hasSelected: true,
      //ohter是否出现
      otherflag: false,
      //table搜索的input里面的值
      inputValue: "",
      queryForm: {
        name: undefined,
        appid: undefined,
        assetsId: undefined,
        department: undefined,
        owner: undefined,
        controller: undefined,
        entities: undefined,
        environment: undefined,
        state: undefined,
        rpaid: undefined,
      },
      tableListData: [],
      eyeDrawerList: [], // 眼睛弹窗列表
      // 新增
      appInfo: {},
      customLocale: {
        emptyText: this.$t("user.verification-code.required111566110577183"),
      },
      appInfo1: {},
      appInfo2: {},
      loading: false,
      detailsIndex: 0,
      // 固定下拉的初始化
      appidLists: [],
      systemControllerSourceData: [],
      sonfigurationItemsContent: [],
      fonfigurationItemsContent: [],
      dataSubjectData: VolumeData,
      // 数据详情
      dataDetailInfoTables: [],
      // 分页数据
      pagination: {
        page: 1, //当前页
        pageSize: 10, //每页条数
        total: 0, //总条数
        showQuickJumper: true,
        hideOnSinglePage: true,
      },
      // 导入DI的最终结果数据集
      importDiResult: [],
      // 导入DI的时候选中的值
      checkedKeys: [],
      // 导入DI时的树状数据
      treeData: [],
      // 获取分类分级
      dccSelectData: [],
      // 导入的数据
      dccDiData: [],
      see: false,
      // 语言
      lang: "zh-EN",
      // 数据字段
      dataItemsSearchData: [],
    
      ifLoading: false,
      isInitialized: false
    };
  },
  created() {
    this.init();
    console.log(this.initData);
    // 获取列表
    // this.fetchUser("");
  },
  mounted() {
    // 语言切换监听
    let that = this;
    window.addEventListener("setItemEvent", function (e) {
      // console.log(e);
      if (e.key === "lang") {
        that.lang = JSON.parse(e.value);
        if (that.lang == "zh-EN") {
          // that.tx(1);
          that.filterSearchInputOptionEn();
          that.isLang = false;
        } else {
          // that.tx();
          that.handleSearch();
          that.isLang = true;
        }
      }
    });
  },
  methods: {
    // 打开新增
    onChange1(e, type) {
      this.temporarily = e;
      this.temporarily.types = type;
      this.$refs.addappid.open();
    },
    // 监听搜索
    async fetchUser(value) {
      // 获取APPID下拉数据
      let content = value;
      const { data: appidLists } = await appIdCreatexl({ content });
      this.appidLists = appidLists;
    },
    async handleDiChange(e) {
      try {
        var tempLists = [];
        const { data } = await childataItems({ id: e });
        this.dataDetailInfoTables.forEach((element, i) => {
          if (element.DataItemStr === e) {
            element.DataLevelStr = data[0].DateLevel;
            element.DataSensitiveStr = data[0].SensitivityLevel;
            element.DataItem = e;
          }
          tempLists.push(element);
        });
        this.dataDetailInfoTables = tempLists;
      } catch (error) {
        this.$message.error(error);
      }
    },
    // // 查找用户信息
    async handleSearch(inputs) {
    //   //数据详情的数据字段
      const { data: dataItemsSearchData } = await dccDataItemsSelect({
        search: inputs,
      });
      this.dataItemsSearchData = dataItemsSearchData;
    },
    // // 查找用户信息英文
    async filterSearchInputOptionEn(inputs, option) {
    //   //数据详情的数据字段
      this.dataItemsSearchData = [];
      const { data: dataItemsSearchData } = await dccDataItemsSelect({
        search: inputs,
      });
      this.dataItemsSearchData = dataItemsSearchData;
    },
    // 增加数据列
    changelist() {
      this.dataDetailInfoTables.push({
        DataItemStr: "-",
        RpaType: 2,
      });
    },

  
    /**
     * 数据控制者是否出现other获取
     * @param value
     */
    changeselect(value) {
      this.selectedItems = value;
      let item2 = [];
      value.forEach((item) => {
        this.systemControllerSourceData.forEach((item1, index) => {
          if (item === item1.value) {
            item2.push(item1.label);
          }
        });
      });
      if (item2.includes("Other")) {
        this.otherflag = true;
      } else {
        this.otherflag = false;
      }
    },
  
    async handleOk(e) {
      // 清空旧的数据
      this.treeData = [];
      this.dccDiData = [];
      this.current = 0;
      try {
        // 循环处理新的数据
        for (var i = 0; i < this.importDiResult.length; i++) {
          const { data } = await childataItems({
            id: this.importDiResult[i].Rid,
          });
          this.dataDetailInfoTables.push({
            key: this.importDiResult[i].No,
            DataItemStr: this.importDiResult[i].Result,
            DataItemStrEn: this.importDiResult[i].ResultEn,
            DataItem: this.importDiResult[i].Rid,
            DataLevelStr: data[0].DateLevel,
            DataLevel: data[0].SourceDataLevel, // 数据级别
            DataSensitiveStr: data[0].SensitivityLevel, // 数据敏感度
            DataSensitive: data[0].SourceSensitivityLevel,
          });
        }
      } catch (error) {
        this.$message.error(error);
      }
      this.importDiResult = [];
      this.visible = false;
    },
    //删除
    async del(id) {
      this.listLoading = true;
      try {
        await dataDelete({ id: id });
        this.$message.success(
          this.$t("user.verification-code.required111566110577133")
        );
        // await this.getList();
      } catch (error) {
        // 报错信息
        this.$message.error(error);
      } finally {
        // 不管成功失败都会执行
        this.listLoading = false;
      }
    },
   
  
    async mate() {
      var tempLists = [];
      this.importDiResult = [];
      // 开始匹配数据
      for (var i = 0; i < this.dccDiData.length; i++) {
        // 发起查询匹配
        const { data } = await discoverFinds({
          Items: this.dccDiData[i].Items1,
          Classification: this.dccDiData[i].Classification,
        });
        // 判断返回结果
        if (data.Result !== "未匹配") {
          this.dccDiData[i].Result = data.Info;
          this.dccDiData[i].ResultEn = data.InfoEn;
          this.dccDiData[i].Rid = data.Id;
          this.importDiResult.push(this.dccDiData[i]);
        } else {
          this.dccDiData[i].Result = data.Result;
          this.dccDiData[i].ResultEn = data.ResultEn;
          this.dccDiData[i].Rid = 0;
        }
        tempLists.push(this.dccDiData[i]);
      }
      this.dccDiData = tempLists;
    },
    async handleChangeDiAppid(value, index) {
      // 根据APPID查数据发现的字段
      const { data } = await discoverTree({ DiscoverAppId: index.key });
      this.treeData = data.treeData;
      this.checkedKeys = data.ids;
    },
    /**
     * 初始化数据
     * @returns {Promise<void>}
     */
    async init() {
      //获取用户信息
      // const { data } = await getUserInfo();
      // this.userroleid = data.role;
      // this.userdata = data;
      // this.userroleid = data.role;
      //数据详情的数据字段
      // const { data: dataItemsSearchData } = await dccDataItemsSelect();
      // this.dataItemsSearchData = [];
      // this.dataItemsSearchData = dataItemsSearchData;
      // 加载数据控制者数据
      // const { data: systemControllerSourceData } = await configurationSelect({
      //   state: 11,
      // });

      // 城市
      // const { data: sonfigurationItemsContent } = await appidSxq({ state: 3 });
      // 存放地
      // const { data: fonfigurationItemsContent } = await appidSxq({ state: 4 });
      // this.sonfigurationItemsContent = sonfigurationItemsContent;
      // this.fonfigurationItemsContent = fonfigurationItemsContent;

      const { appidLists, sonfigurationItemsContent, fonfigurationItemsContent } = this.initData
      this.appidLists = appidLists
      this.sonfigurationItemsContent = sonfigurationItemsContent
      this.fonfigurationItemsContent = fonfigurationItemsContent


      // 分类分级数据
      // const { data: dccSelectData } = await dccSelect();
      // 获取用户列表下拉
      // const { data: userList } = await userQuery(1);
      // this.userList = userList;
      // this.dccSelectData = dccSelectData;
      // this.systemControllerSourceData = systemControllerSourceData;
      if (this.$t("user.login.userName").trim() === "数据盘库表") {
        this.lang = "zh-CN";
      }
      // 获取列表数据
      // await this.getList();
    },
    async submitSave() {
      // 保存草稿
      const {
        form: { validateFields },
      } = this;
      // 按钮loading
      this.loading = true;
      validateFields({ force: false }, async (err, values) => {
        try {
          if (values.DataLibraryController != undefined) {
            values.DataLibraryController =
              values.DataLibraryController.join(",");
          }
          values["Details"] = this.dataDetailInfoTables;
          values["DataLibraryState"] = 2;
          var tempLists = [];
          for (var i = 0; i < this.dataDetailInfoTables.length; i++) {
            if (
              !this.dataDetailInfoTables[i].DataCity ||
              this.dataDetailInfoTables[i].DataCity.length == 0
            ) {
              this.$message.error(this.$t("menu.account.logout1122992244"));
              return;
            }
            if (
              !this.dataDetailInfoTables[i].DataDeposit ||
              this.dataDetailInfoTables[i].DataDeposit.length == 0
            ) {
              this.$message.error(this.$t("menu.account.logout1122992255"));
              return;
            }
            if (
              !this.dataDetailInfoTables[i].DataSource ||
              this.dataDetailInfoTables[i].DataSource.length == 0
            ) {
              this.$message.error(this.$t("menu.account.logout1122992266"));
              return;
            }
            if (
              !this.dataDetailInfoTables[i].DataDestination ||
              this.dataDetailInfoTables[i].DataDestination.length == 0
            ) {
              this.$message.error(this.$t("menu.account.logout1122992277"));
              return;
            }
          }
          for (var i = 0; i < this.dataDetailInfoTables.length; i++) {
            this.dataDetailInfoTables[i].DataCity =
              this.dataDetailInfoTables[i].DataCity.join(",");
            this.dataDetailInfoTables[i].DataDeposit =
              this.dataDetailInfoTables[i].DataDeposit.join(",");
            this.dataDetailInfoTables[i].DataSource =
              this.dataDetailInfoTables[i].DataSource.join(",");
            this.dataDetailInfoTables[i].DataDestination =
              this.dataDetailInfoTables[i].DataDestination.join(",");
            tempLists.push(this.dataDetailInfoTables[i]);
          }
          values["Details"] = tempLists;
          values["DataLibraryState"] = 1;
          if (values.Id != undefined) {
            const { data } = await dataLibraryChange({ ...values });
          } else {
            const { data } = await dataLibraryCreate({ ...values });
          }
        } catch (error) {
          this.$message.error(error);
        } finally {
          this.loading = false;
        }
        this.dataDetailInfoTables = [];
        this.otherflag = false;
        this.modalVisible = false;
        // await this.getList();
      });
    },
    async submitCreate() {
      // 提交新建
      const {
        form: { validateFields },
      } = this;
      // 按钮loading
      this.loading = true;
      validateFields({ force: true }, async (err, values) => {
        if (!err) {
          try {
            if (this.dataDetailInfoTables.length < 1) {
              this.$message.error(
                this.$t("user.verification-code.required111566110577342")
              );
              return;
            }
            values.DataLibraryEnvironment = parseInt(
              values.DataLibraryEnvironment
            );
            values["Details"] = this.dataDetailInfoTables;

            values.DataLibraryController =
              values.DataLibraryController.join(",");
            values["DataLibraryState"] = 2;

            var tempLists = [];
            for (var i = 0; i < this.dataDetailInfoTables.length; i++) {
              if (
                !this.dataDetailInfoTables[i].DataCity ||
                this.dataDetailInfoTables[i].DataCity.length == 0
              ) {
                this.$message.error(this.$t("menu.account.logout1122992244"));
                return;
              }
              if (
                !this.dataDetailInfoTables[i].DataDeposit ||
                this.dataDetailInfoTables[i].DataDeposit.length == 0
              ) {
                this.$message.error(this.$t("menu.account.logout1122992255"));

                return;
              }
              if (
                !this.dataDetailInfoTables[i].DataSource ||
                this.dataDetailInfoTables[i].DataSource.length == 0
              ) {
                this.$message.error(this.$t("menu.account.logout1122992266"));

                return;
              }
              if (
                !this.dataDetailInfoTables[i].DataDestination ||
                this.dataDetailInfoTables[i].DataDestination.length == 0
              ) {
                this.$message.error(this.$t("menu.account.logout1122992277"));

                return;
              }
            }
            for (var i = 0; i < this.dataDetailInfoTables.length; i++) {
              this.dataDetailInfoTables[i].DataCity =
                this.dataDetailInfoTables[i].DataCity.join(",");
              this.dataDetailInfoTables[i].DataDeposit =
                this.dataDetailInfoTables[i].DataDeposit.join(",");
              this.dataDetailInfoTables[i].DataSource =
                this.dataDetailInfoTables[i].DataSource.join(",");
              this.dataDetailInfoTables[i].DataDestination =
                this.dataDetailInfoTables[i].DataDestination.join(",");

              tempLists.push(this.dataDetailInfoTables[i]);
            }
            values["Details"] = tempLists;

            if (values.Id != undefined) {
              const { data } = await dataLibraryChange({ ...values });
            } else {
              const { data } = await dataLibraryCreate({ ...values });
            }
            this.$message.success(
              this.$t("user.verification-code.required111566171")
            );
          } catch (error) {
            this.$message.error(error);
          } finally {
            this.loading = false;
          }
          this.dataDetailInfoTables = [];
          this.otherflag = false;
          this.modalVisible = false;
          // await this.getList();
        } else {
          setTimeout(() => {
            this.loading = false;
          }, 600);
        }
      });
    },
    async handleChangeAppid(value, index) {
      const { data } = await appIdDetail({ id: index.key });
      this.form.setFieldsValue({
        AppidName: data.AppName,
        AppOwner: data.AppOwner,
        AppDepartment: data.AppDepartment,
        BbaAppId: data.BbaAppId,
        BmwAppId: data.BmwAppId,
        FeatherId: data.FeatherId,
      });
    },
    // 分页事件 直接复制使用 通用的
    tableChange(e, searchInputs) {
      let parames = Object.keys(searchInputs);
      for (var i = 0; i < parames.length; i++) {
        searchInputs[parames[i]] = searchInputs[parames[i]].join();
      }
      this.queryForm = { ...searchInputs };
      // this.getList("filter");
    },
    // 获取列表
    // async getList(state) {
    //   this.listLoading = true;
    //   const { page, pageSize } = this.pagination;
    //   try {
    //     if (state === "filter") {
    //       // 调用查询列表
    //       const { data } = await dataLibraryLists({
    //         ...{ page: 1, pageSize: 10 },
    //         ...this.queryForm,
    //       });
    //       // 解构赋值
    //       const { Page, PageSize, Total, Lists } = data;
    //       // 给table赋值
    //       this.tableListData = Lists || [];
    //       // 给分页数据赋值
    //       this.pagination = {
    //         page: Page,
    //         pageSize: PageSize,
    //         total: Total,
    //       };
    //     } else {
    //       // 调用查询列表
    //       const { data } = await dataLibraryLists({
    //         ...{ page, pageSize },
    //         ...this.queryForm,
    //       });
    //       // 解构赋值
    //       const { Page, PageSize, Total, Lists } = data;
    //       // 给table赋值
    //       this.tableListData = Lists || [];
    //       // 给分页数据赋值
    //       this.pagination = {
    //         page: Page,
    //         pageSize: PageSize,
    //         total: Total,
    //       };
    //     }
    //   } catch (error) {
    //     // 报错信息
    //     this.$message.error(error);
    //   } finally {
    //     // 不管成功失败都会执行
    //     this.listLoading = false;
    //   }
    // },
    // 重置
    restQuery() {
      this.queryForm = {
        name: undefined,
        appid: undefined,
        assetsId: undefined,
        department: undefined,
        owner: undefined,
        controller: undefined,
        entities: undefined,
        environment: undefined,
        state: undefined,
        rpaid: undefined,
      };
      // this.getList();
    },
    async filterSearchInputOption(inputs, option) {
		//数据详情的数据字段
		const { data: dataItemsSearchData } = await dccDataItemsSelect({
			search: inputs,
		})
		this.dataItemsSearchData = dataItemsSearchData
	},
	async filterSearchInputOptionEn(inputs, option) {
		//数据详情的数据字段
		this.dataItemsSearchData = []
		const { data: dataItemsSearchData } = await dccDataItemsSelect({
			search: inputs,
		})
		for (var i = 0; i < dataItemsSearchData.length; i++) {
			this.dataItemsSearchData.push({
				label: dataItemsSearchData[i].labelEn,
				value: dataItemsSearchData[i].value,
			})
		}
	},
    async appIdCreatexlFz(val) {
		const { data: appidLists } = await appIdCreatexl({
			content: val,
			types: 1,
		})
		this.appidLists = this.appidLists.concat(appidLists)
		const arr = this.appidLists.concat(appidLists);
        const result = Array.from(new Set(arr.map(item => JSON.stringify(item)))).map(item => JSON.parse(item));
        this.appidLists = result;
	},
    async showModal(state, item) {
      // console.log(item);
      
      // 数据清空
      this.form.resetFields();
      this.modalVisible = true;
      if (state == "detail") {
        this.see = true;
      }
      if (state == "edit" || state == "detail") {
        // 查基础数据DataLibraryEnvironment
        // this.otherflag=true; 
        const diIdMatch = item.match(/\d+/);
        const diId = parseInt(diIdMatch[0])
        // console.log('diId',diId);
        const { data: dataInfo } = await dataLibraryDetail({ Id: diId });
        if (dataInfo.DataLibraryControllerOther != "") {
          this.otherflag = true;
        } else {
          this.otherflag = false;
        }
        let arr3 = [];
        if (dataInfo.DataLibraryController == "") {
          arr3 = undefined;
        } else {
          let arr1 = dataInfo.DataLibraryController.split(",");
          arr1.forEach((item) => {
            arr3.push(parseInt(item));
          });
        }
        let DataUpdatetime = "";
        if (dataInfo.DataLibraryUpdatetime == "") {
          DataUpdatetime = "N/A";
        } else {
          DataUpdatetime = dataInfo.DataLibraryUpdatetime;
        }
        let DataCreateTime = "";
        if (dataInfo.DataLibraryCreatetime == "") {
          DataCreateTime = "N/A";
        } else {
          DataCreateTime = dataInfo.DataLibraryCreatetime;
        }
        let DataappidId = "";
        if (dataInfo.DataLibraryAppidId == 0) {
          DataappidId = undefined;
        } else {
          DataappidId = dataInfo.DataLibraryAppidId;
        }
        await this.$nextTick();
        // console.log("===> ", dataInfo.DataLibraryEnvironment);
        this.form.setFieldsValue({
          DataLibraryAppidId: DataappidId,
          DataLibraryCreateTime: DataCreateTime,
          DataLibraryUpdateTime: DataUpdatetime,
          DataLibraryController: arr3,
          DataLibraryControllerOther: dataInfo.DataLibraryControllerOther,
          DataLibraryEnvironment: dataInfo.DataLibraryEnvironment
            ? dataInfo.DataLibraryEnvironment
            : null,
          DataLibraryEntities: dataInfo.DataLibraryEntities,
          DataAssetsId: dataInfo.DataAssetsId,
          DataLibraryUser: dataInfo.DataLibraryUser,
          Id: dataInfo.Id,
          BmwAppId: dataInfo.BmwAppId,
          BbaAppId: dataInfo.BbaAppId,
          FeatherId: dataInfo.FeatherId,
        });
        this.handleChangeAppid("", { key: dataInfo.DataLibraryAppidId });

        let tempLists = [];
        await this.$nextTick();

        if (dataInfo.Details) {
          for (var i = 0; i < dataInfo.Details.length; i++) {
            var arr5 = [];
            dataInfo.Details[i].DataCity.split(",").forEach((item) => {
              if (item != "NaN" && item) {
                arr5.push(parseInt(item));
              }
            });
            var arr6 = [];
            dataInfo.Details[i].DataDeposit.split(",").forEach((item) => {
              if (item != "NaN" && item) {
                arr6.push(parseInt(item));
              }
            });
            var arr7 = [];
            dataInfo.Details[i].DataSource.split(",").forEach((item) => {
              if (item != "NaN" && item) {
                arr7.push(parseInt(item));
              }
            });
            var arr8 = [];
            dataInfo.Details[i].DataDestination.split(",").forEach((item) => {
              if (item != "NaN" && item) {
                arr8.push(parseInt(item));
              }
            });
             //数据字段
            if (dataInfo.Details[i].DataItemStr) {
                if (localStorage.getItem('lang') == '"zh-CN"') {
                    this.filterSearchInputOption(dataInfo.Details[i].DataItemStr)
                } else if (localStorage.getItem('lang') == '"zh-EN"') {
                    this.filterSearchInputOptionEn(dataInfo.Details[i].DataItemStr)
                }
            }
            if (dataInfo.Details[i].DataDestinationStr) {
				let DataDestinationStr =
					dataInfo.Details[i].DataDestinationStr.split(',')
				DataDestinationStr.map((item) => {
				    this.appIdCreatexlFz(item)
				})
			}
            if (dataInfo.Details[i].SourceStr) {
				let SourceStr = dataInfo.Details[i].SourceStr.split(',')
					SourceStr.map((item) => {
					   this.appIdCreatexlFz(item)
				})
			}
            var tempItems = {
              Id: dataInfo.Details[i].Id,
              key: dataInfo.Details[i].Id,
              DataItemStr: dataInfo.Details[i].DataItemsStr,
              DataItemStrEn: dataInfo.Details[i].DataItemsStrEn,
              DataItem: dataInfo.Details[i].DataItem,
              DataLevelStr: dataInfo.Details[i].DataLevelStr,
              DataLevel: dataInfo.Details[i].SourceDataLevel, // 数据级别
              DataSensitiveStr: dataInfo.Details[i].DataSensitivityStr, // 数据敏感度
              DataSensitive: dataInfo.Details[i].SourceDataSensitive,
              DataCity: arr5,
              DataDeposit: arr6,
              DataSource: arr7,
              DataDestination: arr8,
            };
            tempLists.push(tempItems);
          }
        }
        this.dataDetailInfoTables = tempLists;
      }

      if (state == "edit") {
        this.modalTitle = this.$t("user.verification-code.required1115667777");
      } else if (state == "add") {
        this.modalTitle = this.$t("user.verification-code.required1115667766");
      } else if (state == "detail") {
        this.modalTitle = this.$t(
          "user.verification-code.required11156677888888"
        );
      }
    },
    // 关闭抽屉
    closeDrawer() {
      this.otherflag = false;
      this.see = false;
      this.loading = false;
      this.dataDetailInfoTables = [];
      this.modalVisible = false;
    },
    /**
     * 删除DI
     * @param record DI记录
     * @returns {Promise<void>}
     */
    async deletes(record) {
      try {
        await dataLibraryDelete({ Id: record.Id });
        this.dataDetailInfoTables.splice(
          this.dataDetailInfoTables.indexOf(record),
          1
        );
        this.$message.success(
          this.$t("user.verification-code.required111566110577133")
        );
      } catch (error) {
        // 报错信息
        this.$message.error(error);
      }
    },
    /**
     * 打开抽屉
     */
    openModal() {
      this.diForm.resetFields();
      this.visible = true;
    },
    handleCancel(e) {
      this.treeData = [];
      this.dccDiData = [];
      this.current = 0;
      this.importDiResult = [];
      // 取消关闭抽屉
      this.visible = false;
    },
    next() {
      // 保存草稿
      const {
        diForm: { validateFields },
      } = this;
      // 按钮loading
      this.loading = true;
      validateFields({ force: false }, async (err, values) => {
        if (!err) {
          let res = []; // 用于存储递归结果（扁平数据）
          // 递归函数
          let fn = (source) => {
            source.forEach((el) => {
              res.push(el);
              el.children && el.children.length > 0 ? fn(el.children) : ""; // 子级递归
            });
          };
          fn(this.treeData);
          // 将结果数据插入到列表中
          this.dccDiData = [];
          for (var i = 0; i < res.length; i++) {
            var dataImport = {};
            if (this.checkedKeys.indexOf(res[i].key) != -1) {
              dataImport["Id"] = res[i].key;
              const data = res[i].title.split("/");
              if (data.length > 1) {
                // 0为前，1为备注
                dataImport["Items"] = data[1];
                dataImport["Items1"] = data[1];
              } else {
                dataImport["Items"] = data[0];
                dataImport["Items1"] = data[0];
              }
              this.dccDiData.push(dataImport);
            }
          }
          this.current++;
        } else {
          setTimeout(() => {}, 600);
        }
      });
    },
    prev() {
      this.current--;
    },
    showEye(data) {
      this.detailTitle =
        data.DataAssetsId +
        this.$t("user.verification-code.required111566110577145");
      this.eyeDrawerList = [];
      this.eyeDrawerList = data.details;
      this.eyeDrawer = true;
    },
    closeEyeDrawer() {
      this.eyeDrawer = false;
    },
    filterOption(input, option) {
      return (
        option.componentOptions.children[0].text
          .toLowerCase()
          .indexOf(input.toLowerCase()) >= 0
      );
    },
  },
};
</script>

<style lang="less" scoped>
.blocks {
  color: #5076a5;
}

.header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 30px;
}

.card {
  display: flex;
  align-items: center;
  border-radius: 8px;
  box-shadow: 2px 5px 5px rgba(0, 0, 0, 0.3);
  padding: 20px;
  padding-right: 150px;

  h4 {
    font-size: 30px;
  }

  p {
    font-size: 16px;
    color: #999;
  }
}

/deep/ .drawer-form {
  margin-bottom: 40px;

  .ant-form-item-label {
    display: inline-block;
    line-height: 40px;
    width: 100px;
    margin-right: 10px;
  }
}

.find-button {
  float: left;
  margin-top: -50px;
  margin-left: 100px;
}

.ant-pagination {
  float: right;
}

.ty {
  width: 13px;
  height: 13px;
  opacity: 1;
  background: rgba(255, 255, 255, 1);
  border: 4px solid #5076a5;
  border-radius: 50%;
}

.fa {
  position: relative;
}

.ant-dropdown-link {
  color: #5076a5;
}

.appids {
  margin-left: 90px;
}

/deep/ .ant-form-item-label {
  overflow: visible !important;
}
.big-box {
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.7);
  position: fixed;
  top: 0;
  left: 0;
  z-index: 9999999;
  display: flex;
  justify-content: center;
  align-items: center;
}
:deep(.ant-form-item) {
  margin-bottom: 0;
}
</style>